<script setup>
import { ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';

const formState = ref({
  nickname: '',
  introduction: '',
  email: '',
  pic: ''
})
const rules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' }
  ],
  introduction: [
    { required: true, message: '请输入简介', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' }
  ],
}
</script>

<template>
  <div class="basic">
    <h3>基本设置</h3>

    <a-form :model="formState" :rules="rules" :label-col="{ span: 5 }" :wrapper-col="{ span: 10 }"
      style="display: flex;justify-content: space-between;gap: 20px;">
      <div class="left">
        昵称
        <a-form-item name="nickname" class="myinput">
          <a-input v-model:value="formState.nickname" />
        </a-form-item>
        个人简介
        <a-form-item name="introduction" class="myinput">
          <a-textarea v-model:value="formState.introduction" />
        </a-form-item>
        邮箱
        <a-form-item name="email" class="myinput">
          <a-input v-model:value="formState.email" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary">更新基本信息</a-button>
        </a-form-item>
      </div>
      <div class="right">
        <a-form-item class="pic">
          <a-upload action="/upload.do" list-type="picture-card">
            <div>
              <PlusOutlined class="iconAdd" />
            </div>
          </a-upload>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>
<style lang="less" scoped>
.basic {
  width: 100%;

  .left {
    flex: 1 1 530px;

    .myinput {
      margin-bottom: 40px;
      display: flex;

      :deep(.ant-form-item-control-input) {
        min-width: 400px;
        // flex: 1  500;
      }
    }
  }

  .right {
    flex: 1 1 370px;

    ::v-deep(.ant-upload-select-picture-card) {
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: url(https://preview.pro.antdv.com/avatar2.jpg) no-repeat;
      background-size: cover;

      div {
        .iconAdd {
          font-size: large;
          opacity: 0;
          color: #fff;
        }
      }

      &:hover {
        .iconAdd {
          opacity: 1;
        }

        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url(https://preview.pro.antdv.com/avatar2.jpg) no-repeat;
        background-size: cover;

      }
    }
  }
}
</style>
